/* eslint-disable no-unused-vars */
<template>
  <div>
    <!-- <el-cascader :disabled="true" @change="handleChange" filterable change-on-select v-model="value" :props="props"></el-cascader> -->
    <!--
    disabled: 禁用
    filterable: 可以过滤
    change-on-select: 选中后才能改变值
    props: {
      lazy: 懒加载,
      lazyLoad: 懒加载的处理函数
        第一个参数是当前选中的节点
        第二个参数是回调函数,回调时出入子节点列表
    }
    -->
    <el-cascader
      ref='cas'
      v-model="value"
      :options="options"
      @visible-change="visible"
      @expand-change="expand"
      @change="handleChange"
    ></el-cascader>
    <!-- :props="{lazy: true, lazyLoad:lazyLoad}" -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      orginValue: [],
      orginActivePath: {},
      value: [1, 3],
      options: []
    }
  },
  methods: {
    initOptions() {
      this.options = [
        {
          value: 1,
          label: '北京',
          leaf: false,
          children: [
            { value: 3, label: '东城区', leaf: true }, { value: 4, label: '西城区', leaf: true }
          ]
        },
        { value: 2, label: '上海', leaf: false, children: [] }
      ]
    },
    visible(v) {
      // console.log(arguments)
      // debugger
      // 弹出层时, 重新点击一下选中的项
      // 根据内容单击选项
      // var labels = this.$refs['cas'].panel.$el.querySelectorAll('.el-cascader-node__label')
      // console.log(labels)
      // var level1 = this.options.findX([{ value: this.value[0] }])
      // labels.forEach(element => {
      //   debugger
      //   if (element.textContent === level1.label) {
      //     element.click()
      //   }
      // })
      // 保存被选中的元素
      if (v) {
        if (this.orginValue && this.orginValue === this.value) {
          this.el.forEach(element => {
            // debugger
            element.click()
          })
        } else if (this.value) {
          this.orginValue = this.value
          this.el = this.$refs['cas'].panel.$el.querySelectorAll('.in-active-path')
          console.log(this.el)
        }
      }
    },
    expand(path, nodes) {
      // 展开节点时, 向节点中添加子选项
      // debugger
      // eslint-disable-next-line no-unused-vars
      var level = path.length // 需要展开的节点的层级
      // eslint-disable-next-line no-unused-vars
      var value = path.pop() // 需要展开的节点的值
      setTimeout(() => {
        // debugger
        if (level === 1) { // nodes.value 是选项
          // 调接口, 把省份信息传回去, 收到城市信息, 把城市信息组装成节点列表
          var newnodes = []
          if (value === 1) {
            // 返回北京的内容
            newnodes = [{ value: 3, label: '东城区', leaf: true }, { value: 4, label: '西城区', leaf: true }]
          }
          if (value === 2) {
            newnodes = [{ value: 5, label: '黄浦区', leaf: true }, { value: 6, label: '浦东', leaf: true }]
          }
          var the = this.options.findX([{ value: value }])
          the.children = newnodes
        }
      }, 0)
    },
    lazyLoad(nodes, callback) {
      /**
       * nodes: 选中的那个节点, 并且这个节点不是叶子节点(这个节点有下级节点)
       * callback: 把选中的节点的子节点列表传回去, 通过callback的参数
       */
      console.log(nodes)
      if (nodes.level === 1) { // nodes.value 是选项
        // 调接口, 把省份信息传回去, 收到城市信息, 把城市信息组装成节点列表
        if (nodes.value === 1) {
          // 返回北京的内容
          var newnodes1 = [{ value: 3, label: '东城区', leaf: true }, { value: 4, label: '西城区', leaf: true }]
          callback(newnodes1)
        }
        if (nodes.value === 2) {
          var newnodes2 = [{ value: 5, label: '黄浦区', leaf: true }, { value: 6, label: '浦东', leaf: true }]
          callback(newnodes2)
        }
      }
      // 根节点
      // level: 0
      // loading: true
      // root: true
      if (nodes.level === 0) { // nodes.level 是层级
        var newnodes = [{ value: 1, label: '北京', leaf: false }, { value: 2, label: '上海', leaf: false }]
        callback(newnodes)
      }
      // if (nodes.level === 1) { // nodes.level 是层级
      //   Promise.resolve().then(() => {
      //     var newnodes1 = [{ value: 2, label: '2', leaf: true }, { value: 3, label: '3', leaf: true }]
      //     callback(newnodes1)
      //   })
      // }
      // if (nodes.level === 0) {
      //   Promise.resolve().then(() => {
      //     var newnodes = [{ value: 1, label: '1', leaf: false }]
      //     callback(newnodes)
      //   })
      // }
    },
    handleChange(value) {
      console.log(value)
    }
  },
  created() {
    this.initOptions()
  }
}
</script>
